रिएक्ट एरर बाउंड्री में त्रुटियों का वर्गीकरण: एक व्यापक गाइड

मजबूत और रखरखाव योग्य रिएक्ट एप्लिकेशन बनाने के लिए त्रुटि प्रबंधन (Error handling) एक महत्वपूर्ण पहलू है। जबकि रिएक्ट की एरर बाउंड्री रेंडरिंग के दौरान होने वाली त्रुटियों को शालीनता से संभालने के लिए एक तंत्र प्रदान करती है, यह समझना कि विभिन्न त्रुटि प्रकारों को कैसे वर्गीकृत किया जाए और उन पर प्रतिक्रिया दी जाए, वास्तव में एक लचीला एप्लिकेशन बनाने के लिए महत्वपूर्ण है। यह गाइड एरर बाउंड्री के भीतर त्रुटि वर्गीकरण के विभिन्न दृष्टिकोणों का पता लगाता है, जो आपकी त्रुटि प्रबंधन रणनीति को बेहतर बनाने के लिए व्यावहारिक उदाहरण और कार्रवाई योग्य अंतर्दृष्टि प्रदान करता है।

रिएक्ट एरर बाउंड्री क्या हैं?

रिएक्ट 16 में प्रस्तुत, एरर बाउंड्री ऐसे रिएक्ट कंपोनेंट्स हैं जो अपने चाइल्ड कंपोनेंट ट्री में कहीं भी जावास्क्रिप्ट त्रुटियों को पकड़ते हैं, उन त्रुटियों को लॉग करते हैं, और पूरे कंपोनेंट ट्री को क्रैश करने के बजाय एक फॉलबैक यूआई (UI) प्रदर्शित करते हैं। वे try...catch ब्लॉक के समान ही काम करते हैं, लेकिन कंपोनेंट्स के लिए।

एरर बाउंड्री की मुख्य विशेषताएं:

• कंपोनेंट-स्तरीय त्रुटि प्रबंधन: विशिष्ट कंपोनेंट सबट्री के भीतर त्रुटियों को अलग करें।
• ग्रेसफुल डिग्रेडेशन: एक कंपोनेंट की त्रुटि के कारण पूरे एप्लिकेशन को क्रैश होने से रोकें।
• नियंत्रित फॉलबैक यूआई: त्रुटि होने पर उपयोगकर्ता-अनुकूल संदेश या वैकल्पिक सामग्री प्रदर्शित करें।
• त्रुटि लॉगिंग: त्रुटि जानकारी लॉग करके त्रुटि ट्रैकिंग और डिबगिंग की सुविधा प्रदान करें।

एरर बाउंड्री में त्रुटियों का वर्गीकरण क्यों करें?

सिर्फ त्रुटियों को पकड़ना ही काफी नहीं है। प्रभावी त्रुटि प्रबंधन के लिए यह समझना आवश्यक है कि क्या गलत हुआ और उसके अनुसार प्रतिक्रिया देना। एरर बाउंड्री के भीतर त्रुटियों को वर्गीकृत करने से कई लाभ मिलते हैं:

• लक्षित त्रुटि प्रबंधन: विभिन्न प्रकार की त्रुटियों के लिए अलग-अलग प्रतिक्रियाओं की आवश्यकता हो सकती है। उदाहरण के लिए, एक नेटवर्क त्रुटि के लिए पुन: प्रयास तंत्र (retry mechanism) की आवश्यकता हो सकती है, जबकि डेटा सत्यापन त्रुटि के लिए उपयोगकर्ता इनपुट सुधार की आवश्यकता हो सकती है।
• बेहतर उपयोगकर्ता अनुभव: त्रुटि के प्रकार के आधार पर अधिक जानकारीपूर्ण त्रुटि संदेश प्रदर्शित करें। एक सामान्य "कुछ गलत हो गया" संदेश एक विशिष्ट संदेश की तुलना में कम सहायक होता है जो नेटवर्क समस्या या अमान्य इनपुट को इंगित करता है।
• उन्नत डिबगिंग: त्रुटियों को वर्गीकृत करना डिबगिंग और समस्याओं के मूल कारण की पहचान के लिए मूल्यवान संदर्भ प्रदान करता है।
• सक्रिय निगरानी: बार-बार होने वाली समस्याओं की पहचान करने और सुधारों को प्राथमिकता देने के लिए विभिन्न प्रकार की त्रुटियों की आवृत्ति को ट्रैक करें।
• रणनीतिक फॉलबैक यूआई: त्रुटि के आधार पर अलग-अलग फॉलबैक यूआई प्रदर्शित करें, जो उपयोगकर्ता को अधिक प्रासंगिक जानकारी या क्रियाएं प्रदान करते हैं।

त्रुटि वर्गीकरण के दृष्टिकोण

रिएक्ट एरर बाउंड्री के भीतर त्रुटियों को वर्गीकृत करने के लिए कई तकनीकों का उपयोग किया जा सकता है:

1. instanceof का उपयोग करना

instanceof ऑपरेटर यह जांचता है कि कोई ऑब्जेक्ट किसी विशेष क्लास का इंस्टेंस है या नहीं। यह उनके अंतर्निहित (built-in) या कस्टम त्रुटि प्रकारों के आधार पर त्रुटियों को वर्गीकृत करने के लिए उपयोगी है।

उदाहरण:

class NetworkError extends Error {
  constructor(message) {
    super(message);
    this.name = "NetworkError";
  }
}

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // स्टेट को अपडेट करें ताकि अगला रेंडर फॉलबैक यूआई दिखाए।
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // आप त्रुटि को एक त्रुटि रिपोर्टिंग सेवा में भी लॉग कर सकते हैं
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      // आप कोई भी कस्टम फॉलबैक यूआई रेंडर कर सकते हैं
      let errorMessage = "कुछ गलत हो गया।";
      if (this.state.error instanceof NetworkError) {
        errorMessage = "एक नेटवर्क त्रुटि हुई। कृपया अपना कनेक्शन जांचें और फिर से प्रयास करें।";
      } else if (this.state.error instanceof ValidationError) {
        errorMessage = "एक सत्यापन त्रुटि हुई। कृपया अपने इनपुट की समीक्षा करें।";
      }

      return (
        <div>
          <h2>त्रुटि!</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

स्पष्टीकरण:

• कस्टम NetworkError और ValidationError क्लास को परिभाषित किया गया है, जो अंतर्निहित Error क्लास का विस्तार करते हैं।
• MyErrorBoundary कंपोनेंट के render मेथड में, पकड़ी गई त्रुटि के प्रकार की जांच के लिए instanceof ऑपरेटर का उपयोग किया जाता है।
• त्रुटि के प्रकार के आधार पर, फॉलबैक यूआई में एक विशिष्ट त्रुटि संदेश प्रदर्शित किया जाता है।

2. त्रुटि कोड या गुणों का उपयोग करना

एक और दृष्टिकोण है त्रुटि ऑब्जेक्ट के भीतर ही त्रुटि कोड या गुण शामिल करना। यह विशिष्ट त्रुटि परिदृश्यों के आधार पर अधिक सूक्ष्म वर्गीकरण की अनुमति देता है।

उदाहरण:

function fetchData(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(response => {
        if (!response.ok) {
          const error = new Error("Network request failed");
          error.code = response.status; // एक कस्टम त्रुटि कोड जोड़ें
          reject(error);
        }
        return response.json();
      })
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // स्टेट को अपडेट करें ताकि अगला रेंडर फॉलबैक यूआई दिखाए।
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // आप त्रुटि को एक त्रुटि रिपोर्टिंग सेवा में भी लॉग कर सकते हैं
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      let errorMessage = "कुछ गलत हो गया।";
      if (this.state.error.code === 404) {
        errorMessage = "संसाधन नहीं मिला।";
      } else if (this.state.error.code >= 500) {
        errorMessage = "सर्वर त्रुटि। कृपया बाद में पुनः प्रयास करें।";
      }

      return (
        <div>
          <h2>त्रुटि!</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

स्पष्टीकरण:

• fetchData फ़ंक्शन त्रुटि ऑब्जेक्ट में एक code प्रॉपर्टी जोड़ता है, जो HTTP स्टेटस कोड का प्रतिनिधित्व करता है।
• MyErrorBoundary कंपोनेंट विशिष्ट त्रुटि परिदृश्य को निर्धारित करने के लिए code प्रॉपर्टी की जांच करता है।
• त्रुटि कोड के आधार पर अलग-अलग त्रुटि संदेश प्रदर्शित किए जाते हैं।

3. एक केंद्रीकृत त्रुटि मैपिंग का उपयोग करना

जटिल एप्लिकेशनों के लिए, एक केंद्रीकृत त्रुटि मैपिंग बनाए रखने से कोड संगठन और रखरखाव में सुधार हो सकता है। इसमें एक डिक्शनरी या ऑब्जेक्ट बनाना शामिल है जो त्रुटि प्रकारों या कोड को विशिष्ट त्रुटि संदेशों और हैंडलिंग लॉजिक से मैप करता है।

उदाहरण:

const errorMap = {
  "NETWORK_ERROR": {
    message: "एक नेटवर्क त्रुटि हुई। कृपया अपना कनेक्शन जांचें।",
    retry: true,
  },
  "INVALID_INPUT": {
    message: "अमान्य इनपुट। कृपया अपने डेटा की समीक्षा करें।",
    retry: false,
  },
  404: {
    message: "संसाधन नहीं मिला।",
    retry: false,
  },
  500: {
    message: "सर्वर त्रुटि। कृपया बाद में पुनः प्रयास करें।",
    retry: true,
  },
  "DEFAULT": {
    message: "कुछ गलत हो गया।",
    retry: false,
  },
};

function handleCustomError(errorType) {
    const errorDetails = errorMap[errorType] || errorMap["DEFAULT"];
    return errorDetails;
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorDetails: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // स्टेट को अपडेट करें ताकि अगला रेंडर फॉलबैक यूआई दिखाए।
    const errorDetails = handleCustomError(error.message);
    return { hasError: true, errorDetails: errorDetails };
  }

  componentDidCatch(error, errorInfo) {
    // आप त्रुटि को एक त्रुटि रिपोर्टिंग सेवा में भी लॉग कर सकते हैं
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message } = this.state.errorDetails;
      return (
        <div>
          <h2>त्रुटि!</h2>
          <p>{message}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.errorDetails.message}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

function MyComponent(){
    const [data, setData] = React.useState(null);

    React.useEffect(() => {
      try {
        throw new Error("NETWORK_ERROR");
      } catch (e) {
        throw e;
      }
    }, []);

    return <div></div>;
}

स्पष्टीकरण:

• errorMap ऑब्जेक्ट त्रुटि जानकारी संग्रहीत करता है, जिसमें संदेश और पुन: प्रयास फ्लैग शामिल हैं, जो त्रुटि प्रकारों या कोड पर आधारित होते हैं।
• handleCustomError फ़ंक्शन त्रुटि संदेश के आधार पर errorMap से त्रुटि विवरण प्राप्त करता है और यदि कोई विशिष्ट कोड नहीं मिलता है तो डिफ़ॉल्ट मान लौटाता है।
• MyErrorBoundary कंपोनेंट errorMap से उपयुक्त त्रुटि संदेश प्राप्त करने के लिए handleCustomError का उपयोग करता है।

त्रुटि वर्गीकरण के लिए सर्वोत्तम अभ्यास

• स्पष्ट त्रुटि प्रकार परिभाषित करें: अपने एप्लिकेशन के लिए त्रुटि प्रकारों या कोड का एक सुसंगत सेट स्थापित करें।
• प्रासंगिक जानकारी प्रदान करें: डिबगिंग को सुविधाजनक बनाने के लिए त्रुटि ऑब्जेक्ट में प्रासंगिक विवरण शामिल करें।
• त्रुटि प्रबंधन लॉजिक को केंद्रीकृत करें: त्रुटि प्रबंधन को लगातार प्रबंधित करने के लिए एक केंद्रीकृत त्रुटि मैपिंग या उपयोगिता कार्यों का उपयोग करें।
• त्रुटियों को प्रभावी ढंग से लॉग करें: उत्पादन में त्रुटियों को ट्रैक और विश्लेषण करने के लिए त्रुटि रिपोर्टिंग सेवाओं के साथ एकीकृत करें। लोकप्रिय सेवाओं में सेंट्री (Sentry), रोलबार (Rollbar), और बगस्नैग (Bugsnag) शामिल हैं।
• त्रुटि प्रबंधन का परीक्षण करें: यह सत्यापित करने के लिए यूनिट टेस्ट लिखें कि आपकी एरर बाउंड्री विभिन्न त्रुटि प्रकारों को सही ढंग से संभालती हैं।
• उपयोगकर्ता अनुभव पर विचार करें: जानकारीपूर्ण और उपयोगकर्ता-अनुकूल त्रुटि संदेश प्रदर्शित करें जो उपयोगकर्ताओं को समाधान की ओर मार्गदर्शन करते हैं। तकनीकी शब्दजाल से बचें।
• त्रुटि दरों की निगरानी करें: बार-बार होने वाली समस्याओं की पहचान करने और सुधारों को प्राथमिकता देने के लिए विभिन्न प्रकार की त्रुटियों की आवृत्ति को ट्रैक करें।
• अंतर्राष्ट्रीयकरण (i18n): जब उपयोगकर्ता को त्रुटि संदेश प्रस्तुत करते हैं, तो सुनिश्चित करें कि आपके संदेश विभिन्न भाषाओं और संस्कृतियों का समर्थन करने के लिए ठीक से अंतर्राष्ट्रीयकृत हैं। अनुवादों को प्रबंधित करने के लिए i18next या रिएक्ट के कॉन्टेक्स्ट एपीआई जैसी लाइब्रेरियों का उपयोग करें।
• अभिगम्यता (a11y): सुनिश्चित करें कि आपके त्रुटि संदेश विकलांग उपयोगकर्ताओं के लिए सुलभ हैं। स्क्रीन रीडर्स को अतिरिक्त संदर्भ प्रदान करने के लिए ARIA विशेषताओं का उपयोग करें।
• सुरक्षा: इस बारे में सावधान रहें कि आप त्रुटि संदेशों में कौन सी जानकारी प्रदर्शित करते हैं, खासकर उत्पादन वातावरण में। संवेदनशील डेटा को उजागर करने से बचें जिसका हमलावरों द्वारा शोषण किया जा सकता है। उदाहरण के लिए, अंतिम-उपयोगकर्ताओं को रॉ स्टैक ट्रेस प्रदर्शित न करें।

उदाहरण परिदृश्य: एक ई-कॉमर्स एप्लिकेशन में एपीआई त्रुटियों को संभालना

एक ई-कॉमर्स एप्लिकेशन पर विचार करें जो एक एपीआई से उत्पाद जानकारी प्राप्त करता है। संभावित त्रुटि परिदृश्यों में शामिल हैं:

• नेटवर्क त्रुटियाँ: एपीआई सर्वर अनुपलब्ध है या उपयोगकर्ता का इंटरनेट कनेक्शन बाधित हो गया है।
• प्रमाणीकरण त्रुटियाँ: उपयोगकर्ता का प्रमाणीकरण टोकन अमान्य या समाप्त हो गया है।
• संसाधन नहीं मिला त्रुटियाँ: अनुरोधित उत्पाद मौजूद नहीं है।
• सर्वर त्रुटियाँ: एपीआई सर्वर को एक आंतरिक त्रुटि का सामना करना पड़ता है।

एरर बाउंड्री और त्रुटि वर्गीकरण का उपयोग करके, एप्लिकेशन इन परिदृश्यों को सहजता से संभाल सकता है:

// उदाहरण (सरलीकृत)
async function fetchProduct(productId) {
  try {
    const response = await fetch(`/api/products/${productId}`);
    if (!response.ok) {
      if (response.status === 404) {
        throw new Error("PRODUCT_NOT_FOUND");
      } else if (response.status === 401 || response.status === 403) {
        throw new Error("AUTHENTICATION_ERROR");
      } else {
        throw new Error("SERVER_ERROR");
      }
    }
    return await response.json();
  } catch (error) {
    if (error instanceof TypeError && error.message === "Failed to fetch") {
      throw new Error("NETWORK_ERROR");
    }
    throw error;
  }
}

class ProductErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorDetails: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    const errorDetails = handleCustomError(error.message); // पहले दिखाए अनुसार errorMap का उपयोग करें
    return { hasError: true, errorDetails: errorDetails };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message, retry } = this.state.errorDetails;
      return (
        <div>
          <h2>त्रुटि!</h2>
          <p>{message}</p>
          {retry && <button onClick={() => window.location.reload()}>पुनः प्रयास करें</button>}
        </div>
      );
    }

    return this.props.children;
  }
}

स्पष्टीकरण:

• fetchProduct फ़ंक्शन एपीआई प्रतिक्रिया स्थिति कोड की जांच करता है और स्थिति के आधार पर विशिष्ट त्रुटि प्रकार फेंकता है।
• ProductErrorBoundary कंपोनेंट इन त्रुटियों को पकड़ता है और उपयुक्त त्रुटि संदेश प्रदर्शित करता है।
• नेटवर्क त्रुटियों और सर्वर त्रुटियों के लिए, एक "पुनः प्रयास करें" बटन प्रदर्शित किया जाता है, जिससे उपयोगकर्ता फिर से अनुरोध करने का प्रयास कर सकता है।
• प्रमाणीकरण त्रुटियों के लिए, उपयोगकर्ता को लॉगिन पेज पर पुनर्निर्देशित किया जा सकता है।
• संसाधन नहीं मिला त्रुटियों के लिए, एक संदेश प्रदर्शित होता है जो बताता है कि उत्पाद मौजूद नहीं है।

निष्कर्ष

रिएक्ट एरर बाउंड्री के भीतर त्रुटियों को वर्गीकृत करना लचीले, उपयोगकर्ता-अनुकूल एप्लिकेशन बनाने के लिए आवश्यक है। instanceof जांच, त्रुटि कोड, और केंद्रीकृत त्रुटि मैपिंग जैसी तकनीकों का उपयोग करके, आप विभिन्न त्रुटि परिदृश्यों को प्रभावी ढंग से संभाल सकते हैं और एक बेहतर उपयोगकर्ता अनुभव प्रदान कर सकते हैं। यह सुनिश्चित करने के लिए कि आपका एप्लिकेशन अप्रत्याशित परिस्थितियों को सहजता से संभालता है, त्रुटि प्रबंधन, लॉगिंग और परीक्षण के लिए सर्वोत्तम प्रथाओं का पालन करना याद रखें।

इन रणनीतियों को लागू करके, आप अपने रिएक्ट एप्लिकेशनों की स्थिरता और रखरखाव में काफी सुधार कर सकते हैं, अपने उपयोगकर्ताओं को उनके स्थान या पृष्ठभूमि की परवाह किए बिना एक सहज और अधिक विश्वसनीय अनुभव प्रदान कर सकते हैं।

अतिरिक्त संसाधन:

• रिएक्ट एरर बाउंड्री दस्तावेज़ीकरण
• सेंट्री की रिएक्ट 16 एरर बाउंड्री गाइड
• रॉबिन वियरुच का रिएक्ट एरर बाउंड्री ट्यूटोरियल